草庐IT

Vue3 组件

全部标签

javascript - 如何在 React 组件的返回函数中使用 IIFE?

当用户单击按钮时,我会弹出一个模态页面,它运行良好:render(){return(this.refs.simpleDialog.show()}>OpenModalTextthatappearsinsidethemodalpagethis.refs.simpleDialog.hide()}>GotIt)}但我的目标是在用户第一次打开页面时自动打开模式。我不想通过点击按钮打开模态页面问题:我可以使用IIFE(一个立即调用的函数表达式)以便在用户打开页面时立即打开模式吗?我的方法是将bool值设置为true。如果该值设置为true,则打开模态用于模态的库:https://github.co

javascript - 尝试通过 Vue.js 中的渲染传递 Prop 并观看它们

我在使用vue.js中的CreateElement/render将Prop从父级向下传递到创建的子级时遇到问题,然后再观看它。这是我的父组件Vue.component('my-drawing',MyDrawing)newVue({el:'#drawing',mounted(){Bus.$on('emitColorSelection',(emitString)=>{console.log("insidesocket.js/my-drawingandemitStringis",emitString);this.useColor=emitString;console.log('insides

javascript - 动态加载 React 组件

我正在考虑构建一个网络应用程序,人们可以在其中安装插件。我希望插件能够定义将呈现到页面的React组件,而无需在安装插件后重新编译主JavaScript包。所以这是我正在考虑的方法:将主要的JavaScript与React捆绑为externallibrary,使用webpack。让插件作者也使用React作为外部库编译他们的组件。这样一来,我只运行了一个React实例。我或许可以对其他一些常用的库执行相同的操作。接下来的问题是如何从服务器动态加载这些插件组件。假设我有以下组件:classPluginRendererextendsReact.Component{componentWill

javascript - 如何使用 Vue Slider 控制元素

我在requestsjson对象中有一堆数据。默认情况下,所有数据都会显示给用户。此外,我还有一个slider组件。我正在尝试实现这样的功能,即当用户移动slider时,json的元素会根据slider的值出现/消失。例如:数据:requests:[{value:10,name:"foo"},{value:12,name:"bar"},{value:14,name:"foobar"},{value:22,name:"test"},{value:1,name:"testtooo"},{value:8,name:"something"}]默认情况下,我希望显示所有数据,但当用户移动slid

javascript - 同一 View 中的多个 knockout 组件

我四处寻找这个问题的答案,但终究无法弄清楚我所做的与官方示例有何不同,除了我认为我的用例有点更复杂:http://knockoutjs.com/documentation/component-binding.html基本上,我正在尝试创建可重用的UI元素。该行为实质上将通过“params”对象传递给他们。然而,我希望多个元素能够存在于一个页面上,这正是我遇到困难的地方。我正在使用browserify来捆绑我的代码并具有以下内容(为简洁起见chop了一些条目):index.html主要.jsvarko=window.ko=require('knockout'),toggle=requir

javascript - enzyme 测试认证高阶组件(HOC)

我创建了一个高阶组件/组合组件,以确保在加载组件之前对用户进行身份验证。这是非常基本的,但我在测试它时遇到了一些麻烦。我想测试以下几点,这与我在其他地方已经进行的测试类似:呈现组件(我通常通过查找特定于组件的className来检查)有正确的props(在我的例子中是authenticated)如果已通过身份验证,则呈现包装组件;如果未通过身份验证,则呈现nullHOC:importReactfrom'react';import{connect}from'react-redux';import{createStructuredSelector}from'reselect';import

javascript - 从 vue-resource 切换到 axios

使用vue-resource,我们可以像这样在main.js中设置根url:Vue.http.options.root='http://localhost:3000/api'我尝试将其替换为:axios.defaults.baseURL='http://localhost:3000/api';Vue.prototype.$http=axios但是,现在我的post调用没有按预期工作,并且Vue.http.post抛出错误。这是如何实现的? 最佳答案 使用axios,可以创建另一个实例havingacustomconfigvarmy_

javascript - Vue.js 使用计算属性来显示或隐藏组件的一部分

我试图根据下拉列表中的值显示/隐藏组件的一部分。在移动我的表单的这一部分之前,使用计算属性工作得很好。但是......我在我的组件中使用了两种方式绑定(bind),而且我正在使用的属性的计算值似乎更新得太晚了。这里是组件jsVue.component('system',{template:'#system',props:['name','count'],computed:{issummit:function(){returnthis.name==='5a37fda9f13db4987411afd8';}//audiovideo:function(){//returnthis.syste

javascript - Vuejs 不会在 HTML 表格元素中呈现组件

我想呈现一个在表格中显示一行的自定义组件。我有以下代码://jsfileVue.component('message-row',{data:function(){return{msg:'Hello'}},template:'{{msg}}'});newVue({el:'#app'});//htmlfile问题是该行最终呈现在表格之外!像这样:Hello您可以在这个JSFiddlehttps://jsfiddle.net/eciii/7v6yrf3x/中查看它我不确定这是一个错误还是我只是在这里遗漏了一些非常明显的东西...... 最佳答案

javascript - 在 ES6 : "Failed to resolve module specifier "vue""中导入包

尝试遵循一些Vue教程,但我目前无法在.js文件中导入Vue,然后在我的index.html中导入此文件。这就是我在index.html中导入脚本的方式:如果我在我的main.js文件中这样做:importVuefrom'vue';我在浏览器控制台中收到以下错误:UncaughtTypeError:Failedtoresolvemodulespecifier"vue".Relativereferencesmuststartwitheither"/","./",or"../".如果我的导入行:importVuefrom'../../node_modules/vue';然后我得到一个不同的